<template>
  <div class="part">
    <Layer v-bind="layerPost1">
      <div id="chart-post4-1"></div>
    </Layer>
    <Layer v-bind="layerPost2">
      <div class="layerPost2">
        <Suqare2></Suqare2>
        <Suqare2></Suqare2>
        <Suqare2></Suqare2>
      </div>
    </Layer>
  </div>
</template>

<script>
import Layer from './LayerItem.vue'
import Suqare2 from './SuqareItem2.vue'
import * as echarts from 'echarts'

export default {
  name: 'ViewPart4',
  components: { Layer, Suqare2 },
  data() {
    return {
      data1: [
        {
          key: '张三',
          value: 1423,
        },
        {
          key: '李四',
          value: 1123,
        },
        {
          key: '王五',
          value: 1023,
        },
        {
          key: '黄二',
          value: 810,
        },
        {
          key: '徐大',
          value: 782,
        },
        {
          key: '周六',
          value: 532,
        },
        {
          key: '赵七',
          value: 202,
        },
        {
          key: '钟八',
          value: 189,
        },
        {
          key: '刘九',
          value: 120,
        },
        {
          key: '金石',
          value: 89,
        },
      ],
    }
  },
  computed: {
    layerPost1() {
      return {
        title: '用户排行榜',
      }
    },
    layerPost2() {
      return {
        title: '维护',
      }
    },
  },
  mounted() {
    this.drawPost1(this.data1.reverse())
  },
  methods: {
    drawPost1(data) {
      const colorList = [
        ["#fff", "#e9fcfc"],
        ["#e9fcfc", "#d4fafa"],
        ["#d4fafa", "#c0f8f8"],
        ["#c0f8f8", "#a8f5f6"],
        ["#a8f5f6", "#91f3f3"],
        ["#91f3f3", "#77f0f1"],
        ["#77f0f1", "#63eeee"],
        ["#63eeee", "#4eebec"],
        ["#4eebec", "#36e9ea"],
        ["#36e9ea", "#22e7e8"],
      ];
      data.forEach((item, i) => {
        item.itemStyle = {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colorList[i][0] },
            { offset: 1, color: colorList[i][1] },
          ]),
        }
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-post4-1'))
      // 绘制图表
      myChart.setOption({
        textStyle: {
          fontSize: '30px',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '32px',
          },
          formatter: (params) => {
            const param = params[0]
            const { axisValueLabel, marker, value } = param
            let newMarker = marker.replace(
              /(.*border-radius:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(
              /(.*width:)(\d*)(px.*)/,
              '$124$3',
            )
            newMarker = newMarker.replace(
              /(.*height:)(\d*)(px.*)/,
              '$124$3',
            )
            return `${newMarker} ${axisValueLabel}  ${value}核时`
          },
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            fontSize: '32px',
          },
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          axisTick: {
            show: false,
          },
          data: data.map((i) => i.key),
        },
        xAxis: {
          type: 'value',
          name: '核*时',
          nameLocation: 'start',
          axisLabel: {
            fontSize: '30px',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#2d3036',
            },
          },
        },
        grid: {
          left: '17%',
          right: '8%',
          top: '1%',
          bottom: '4%',
        },
        series: [
          {
            data,
            type: 'bar',
            symbolSize: 0,
            lineStyle: {
              color: '#21f1f2',
            },
            itemStyle: {
              // color: '#fff',
              // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //   { offset: 0, color: '#fff' },
              //   { offset: 1, color: '#21e7e8' },
              // ]),
            },
            barWidth: 8,
          },
        ],
      })
    },
  },
}
</script>

<style scoped>
.part {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.layerPost2 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.layerPost2 > * + * {
  margin-top: 1.25rem;
}
</style>
